<script setup lang="ts">
import { reactive, ref, computed } from "vue";
import { message } from "@/utils/message";
import { changePassword } from "@/api/user";
import type { FormInstance, FormRules } from "element-plus";
import {  deviceDetection } from "@pureadmin/utils";
import zxcvbn from "zxcvbn"

defineOptions({
  name: "ChangePassword"
});
const changePasswordFormRef = ref<FormInstance>();

const passwords = reactive({
  oldPassword: "",
  newPassword: "",
  newPasswordAgain: ""
});
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入新密码'))
  }else {
	const validScore =	zxcvbn(value);
	if (validScore.score < 3) {
		console.log(validScore);
		callback(new Error("密码强度不够!至少包含字母、数字和特殊符号中的两种，且长度大于6位"))
	}
    if ( passwords.newPasswordAgain !== '') {
      if (!changePasswordFormRef.value) {
		return changePasswordFormRef.value.validateField('newPasswordAgain')
		}
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== 	passwords.newPassword) {
    callback(new Error("两次密码不一致!"))
  } else {
    callback()
  }
}
const rules = reactive<FormRules<typeof passwords>>({
	oldPassword: [{ required: true, message: "请输入旧密码", trigger: "change" }],
	newPassword: [{   trigger: "change"	,validator: 	validatePass  }],
	newPasswordAgain: [{  trigger: "change"	,validator: 	validatePass2  }]
});




// 更新信息
const onSubmit = async (formEl: FormInstance) => {
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(passwords);
	  changePassword(passwords).then((res) => {
		if(res.success){
			
	      message("修改密码成功", { type: "success" });
		}else{
	      message("修改密码失败:"+res.msg, { type: "error" });
			
		}
		  
	  }).catch(error => {
	      message("修改密码失败", { type: "error" });
		  
	  });
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<template>
  <div
    :class="[
      'min-w-[180px]',
      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
    ]"
  >
    <h3 class="my-8">修改密码</h3>
    <el-form
      ref="changePasswordFormRef"
      label-position="top"
      :rules="rules"
      :model="passwords"
	  :inline-message="true"
    >
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input v-model="passwords.oldPassword" placeholder="旧密码" type="password" style="width: 200px;" 	 	show-password />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="passwords.newPassword" placeholder="新密码" type="password" style="width: 200px;" show-password />
      </el-form-item>
      <el-form-item label="再次输入新密码" prop="newPasswordAgain">
        <el-input v-model="passwords.newPasswordAgain" placeholder="再次输入新密码" type="password" style="width: 200px;" show-password />
      </el-form-item>
      <el-button type="primary" @click="onSubmit(changePasswordFormRef)">
        			提交
      </el-button>
    </el-form>
  </div>
</template>
